<template>
    <div>
        <el-form :inline="true">
            <el-form-item>
                <el-input
                        v-model="searchForm.tagName"
                        placeholder="标签名字"
                        clearable
                >
                </el-input>
            </el-form-item>

            <el-form-item>
                <el-button @click="getUserList">搜索</el-button>
            </el-form-item>
        </el-form>
        <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                border
                stripe
                @selection-change="handleSelectionChange">

            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>

            <el-table-column
                    prop="avatar"
                    label="图标">
            </el-table-column>

            <el-table-column
                    prop="tagName"
                    label="标签名称">
            </el-table-column>

            <el-table-column
                    prop="statu"
                    label="状态">
                <template slot-scope="scope">
                    <el-Tag size="small" v-if="scope.row.statu === 0" type="success">正常</el-Tag>
                    <el-Tag size="small" v-else-if="scope.row.statu === 1" type="danger">禁用</el-Tag>
                </template>

            </el-table-column>
            <el-table-column
                    prop="created"
                    width="200"
                    label="创建时间"
            >
            </el-table-column>
            <el-table-column
                    prop="icon"
                    width="260px"
                    label="操作">

                <template slot-scope="scope">

                </template>
            </el-table-column>

        </el-table>
    </div>
</template>

<script>
import { listTag, getTag, delTag, addTag, updateTag } from "@/api/tag";

export default {
  name: "Tag",
  data() {
    return {
        searchForm: {},
        size: 10,
        current: 1,
        tableData: [],
        // 弹出层标题
        queryParams: {
            current: 1,
            size: 10
        },
    };
  },
  created() {
    this.getList();
  },
  methods: {
      getList() {
          listTag(this.queryParams).then(response => {
              this.tableData = response.rows;
              this.size = response.size;
              this.current = response.current;
              this.total = response.total;
          });
      },
      /** 查询标签列表 */
      getUserList() {
          this.$axios.get("/blog/tag/list", {
              params: {
                  current: this.current,
                  size: this.size
              }
          }).then(res => {
              this.tableData = res.data.data.records
              this.size = res.data.data.size
              this.current = res.data.data.current
              this.total = res.data.data.total
          })
      },
      handleSelectionChange(val) {
          console.log("勾选")
          console.log(val)
          this.multipleSelection = val;

          this.delBtlStatu = val.length == 0
      },
  }
};
</script>
